<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>

<div id="app">

<el-input v-model="query.loginName" style="width: 200px;" cleraable></el-input>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="用户id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="username"
                label="账号">
        </el-table-column>
        <el-table-column
                prop="loginName"
                label="登录名">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">修改用户</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button
                        size="mini"
                        type="warn" @click="editRole(scope.row.id)">分配角色</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="修改用户" :visible.sync="dialogFormVisible">
    <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.loginName" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUser">确 定</el-button>
    </div>
</el-dialog>



    <el-dialog title="角色分配" :visible.sync="roledialogFormVisible">
        <el-table
                :data="roleList" @selection-change="handleSelectionChange" ref="multipleTable"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="角色id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="rname"
                    label="角色名称">
            </el-table-column>

        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateUserRole">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            total:0,
            dialogFormVisible:false,
            query:{
                loginName:"",
                page:1,
                pageSize:2
            },
            form:{
                loginName:""
            },
            roledialogFormVisible:false,
            multipleSelection:[],
            roleList:[],
            currentUid:0 //代表修改用户的id

        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData()
                }
            }
        },
        methods: {
            updateUserRole(){
                if (this.multipleSelection.length==0){
                    this.$message({
                        type:"error",
                        message:"请选择角色"
                    })
                }
                else {
                    let uid=this.currentUid;
                    let rids=this.multipleSelection.map(m=>m.id).join(",");
                    axios.post(`/user/updateRole?uid=${uid}&rids=${rids}`).then(res=>{
                        this.roledialogFormVisible=false;
                    })
                }
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            editRole(id){
               this.currentUid=id;
                axios.post(`/user/userRoleList?id=${id}`).then(res=>{
                   let roleUserList=res.data;
                    this.roledialogFormVisible=true;
                    this.$refs.multipleTable.clearSelection();//清理选中的数据
                    let arr  = [];
                    for (let i = 0; i < roleUserList.length; i++) {
                        let ur=roleUserList[i];
                        for (let j = 0; j < this.roleList.length; j++) {
                            let r=this.roleList[i];
                            if (r.id==ur.rid){
                                arr.push(r)
                            }
                        }
                    }
                    arr.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                    // this.$forceUpdate() //强制更新页面

                });

            },
            updateUser(){
              axios.post(`/user/update`,this.form).then(res=>{
                  this.$message({
                      type: 'success',
                      message: '修改成功!'
                  });
                  this.initData();
                  this.dialogFormVisible=false;
              })
            },
            handleEdit(index,row){
                this.dialogFormVisible=true;
                this.form=JSON.parse(JSON.stringify(row));
            },
            handleDelete(index,row){
                    this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post(`/user/deleteOne?id=`+row.id).then(res=>{
                            this.initData();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'

                            });
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData() {
                axios.post(`/user/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`, this.query).then(res => {
                    console.log(res.data)
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    if (this.tableData.length==0&&this.query.page>1){
                        this.query.page--;
                    }
                });
            },
            initRoleList(){
                axios.post(`/role/findAll`).then(res=>{
                    this.roleList=res.data;
                })
            }
        },
        created(){
            this.initData();
            this.initRoleList();
        }

    })
</script>

</body>
</html>